<style lang="less" scoped>



</style>

<template>
<div>

  <mt-tabbar v-model="selected">

    <mt-tab-item id="/home">
          <i class="iconfont tabs-icon" slot="icon">&#xe622;
          </i>
          首页
      </mt-tab-item>
      <mt-tab-item id="/chat">
          <i class="iconfont tabs-icon" slot="icon">&#xe6e1;</i>
          聊天
      </mt-tab-item>
      <mt-tab-item id="/user">
          <i class="iconfont tabs-icon" slot="icon">&#xe624;</i>
          用户
      </mt-tab-item>
  </mt-tabbar>
    <router-view></router-view>
</div>


</template>

<script>
import Chat from './Main'
export default {
    data() {
        return {
          selected:'/home',
          socket:null
        }
    },
    created(){
      this.initSocket()
    },
    watch:{
      selected:{
          handler:function(newVal,oldVal) {
          this.$router.push({
            path:newVal
          })
        }
      }
      // socket:{
      //   handler:function(newVal,oldVal) {
      //     console.log(newVal);
      //   },
      //   deep:true
      // }
    },
    methods:{
      initSocket(){
        this.socket = new WebSocket('ws://127.0.0.1:5566');
        this.socket.onopen = this.webSocketOnOpen;
        this.socket.onerror = this.webSocketOnError;
        this.socket.onclose = this.webSocketOnClose;
        this.socket.onmessage = this.webSocketOnMessage;
      },
      webSocketOnError(e){
        // console.log(e);
      },
      webSocketOnOpen(){
        this.sendMessage('我收到了')
      },
      webSocketOnMessage(data){
        let obj = eval('(' + data + ')');
        switch (obj.type) {
          case 'authorize':
            console.log(obj.msg);
            break;
          default:

        }
        // console.log(data);
      },
      webSocketOnClose(){
        console.log(关闭了);
      },
      sendMessage(value){
        this.socket.send(value)
      }
    },

}

</script>
